<?php
 require_once('includes/common.php');
 $msg = @$_SESSION['msg'];
 unset($_SESSION['msg']);
?>
<html>
 <head>
  <title>Resgistration page </title>
  <!--http://twitter.github.com/bootstrap/base-css.html#forms --->
   <link rel="stylesheet"
href="css/bootstrap.css">
  <link rel="stylesheet" href="css/site.css">
  <!-- For Java Script Validation with Jquery -->
  <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="js/jquery.validate.js"></script>
  <script type="text/javascript" src="js/jquery.register.js"></script>

  </head>
  <body>

  <form enctype="multipart/form-data"  name="register" action="saveuser.php" method="post" id="registerId">

   <table border="1" cellpadding="0" cellspacing="0" width="50%" align="center" class="table table-striped">
    <thead>
   <tr>
    <th colspan="2">Plaese Fill Of The Form Below <?=$msg?></th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td align="right" width="40">Name :</td>
    <td width="60"><input type="text" name="name" value="rasmus" >
    <label for="name" generated="true" class="error"></label></td>
   </tr>
   <tr>
    <td align="right">E-mail :</td>
    <td><input type="text" value="raasmus@php.net" name="email">

    <span id="showLoaderId"></span>


    </td>
   </tr>
   <tr>
    <td align="right">Password :</td>
    <td><input type="password" id="passwordId" name="password" value="qwerty1234" ></td>
   </tr>
   <tr>
    <td align="right">Confirm Password :</td>
    <td><input name="conPassword" value="qwerty1234" type="password"></td>
   </tr>
   <tr>
    <td align="right">Gender :</td>
    <td>
    <label><input type="radio" name="gender" value="0" >Male</label>
    <label><input type="radio" name="gender" value="1" checked >Female</label><br/>
    <label for="gender" generated="true" class="error"></label>
    </td>
   </tr>
   <tr>
    <td align="right">Address :</td>
    <td><textarea name="address">Noida Sec 56</textarea></td>
   </tr>
   <tr>
    <td align="right">Country :</td>
    <td>
<!------- COUNTRY FROM AJAX------------->
<span id="countryLoaderId"></span>
<div id="countryDivId"></div>

    </td>
   </tr>
   <tr>
    <td align="right">Languages Known :</td>
    <td>
      <select multiple="true" name="lang[]">
     <option value="c" selected>C</option>
     <option value="cpp" selected>C++</option>
     <option value="java">JAVA</option>
     <option value="php" selected>PHP</option>
     <option value="chash">C#</option>
    </select>
    </td>
   </tr>
   <tr>
    <td align="right">Hobbies :</td>
    <td>
     <div>
       <div class="inline"><label><input type="checkbox" value="cricket" name="hobbies[]" checked>Cricket</label></div>
       <div class="inline"><label><input type="checkbox" value="hockey" name="hobbies[]">Hockey</label></div>
     </div>
     <div>
       <div class="inline"><label><input type="checkbox"  value="chess" name="hobbies[]" checked>Chess</label></div>
       <div class="inline"><label><input type="checkbox"  value="football" name="hobbies[]">Football</label></div>
    </div>
    <div>
       <div class="inline"><label><input type="checkbox" name="hobbies[]"  value="golf" checked>Golfs</label></div>
       <div class="inline"><label><input type="checkbox"  value="vollyball" name="hobbies[]">Vollyball</label></div>
    </div>
    <div class="inline" style="width:300px"><label for="hobbies[]" generated="true" class="error"></label></div>
    </td>
   </tr>
   <tr>
    <td align="right">Avatar :</td>
    <td><input type="file" name="avatar"><br/><label for="avatar" generated="true" class="error" style="display: inline;"></label></td>
   </tr>
   <tr>
    <td align="right">&nbsp;</td>
    <td align="left">
    <input class="btn btn-large btn-primary" type="Submit" value="I am done!!" ></td>
   </tr>
  </tbody>
   </table>
  </form>
<script type="text/javascript">
/*
  $(function(){
*/
  jQuery(document).ready(function(){
      var URL = 'ajax/countries.php';
      $.ajax({
        url:URL,
        data:{'id':23,'name':'ajay'},
        type:'POST',
        dataType:'json',
        beforeSend:function(){
          $('#countryLoaderId').html('<img src="img/loader.gif" />');
        },

        success:function(data){
var select = '<select name="country">';
select += '<option value="">-SELECT-</option>';

$.each(data,function(key,value){
//console.log(key)
//console.log(value)
//console.log('--------------')
select += '<option value="'+key+'">'+value+'</option>';
});
select += '</select>';
console.log(select);
$('#countryDivId').html(select);
        },
        complete:function(){

         $('#countryLoaderId').html('');
        },
        error: function(xhr,status,error) {
        //   alert('Error: ' + status) ;
        }
      });

  });
</script>

 </body>
</html>
